<template>
    <div class="register">
        <section class="formcon">
            <h4></h4>
            <dl>
                <dd>
                    <img src="//common-1253410441.file.myqcloud.com/activityimg/20171211190410.png" alt="">
                    <label for="">
                        <input v-model="phone" type="tel" maxlength="11" placeholder="请输入手机号"></label>
                </dd>
                <dd>
                    <img src="//common-1253410441.file.myqcloud.com/activityimg/20171211190409.png" alt="">
                    <label for="">
                        <input v-model="pwd" type="password" placeholder="请输入密码"></label>
                </dd>
                <a class="loginsubmit" href="javascript:;" @click="loginsubmit">登录</a>
                <div class="agree"><span>短信验证码登录</span> <span>忘记密码</span></div>
            </dl>
        </section>
    </div>
</template>

<script>
    import Button from '../../components/Button.vue';
    import {isphone} from '../../uitls/common';
    import {loginR} from '../../service/home';
    import {delay} from '../../uitls/common';
    import {getMyInfoR} from '../../service/my';
    import store2 from 'store2';
    export default {
        components: {
            myButton: Button,
        },
        data() {
            return {
                phone: '',
                pwd: ''
            };
        },
        created() {
        },
        computed: {},
        methods: {
            async loginsubmit(){
                const {phone, pwd}=this;
                if(!isphone(phone)) {
                    this.$vux.toast.text('请输入正确手机号');
                    return;
                }
                if(pwd.length < 6) {
                    this.$vux.toast.text('密码最少6位数');
                    return;
                }
                const {data}=await loginR(phone, pwd);
                if(data && data.code === 0) {
                    let balance = 0;
                    const myinfodata = await getMyInfoR(data.data.Guid);
                    if(myinfodata.data.code === 0) {
                        balance = myinfodata.data.data.balance;
                    }
                    store2('userInfo', {
                        ...data.data, ...{
                            token: data.data.Guid,
                            version: 'mlb',
                            balance: balance || data.data.Balance,
                            mobile: data.data.Name,
                            havPay: data.data.IsHavPay,
                            IsUnionUser: data.data.IsUnionUser,
                            realityName: myinfodata.data.data.clientMbr.realityName
                        }
                    });
                    this.$vux.toast.show({
                        text: '登录成功'
                    });
                    await delay(2000);
                    if(window.history.length > 0) {
                        history.back();
                    }
                    else {
                        this.$router.push('/');
                    }
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../app";

    .register {
        background: #fff;
        height: 100%;
        h4 {
            line-height: 200px;
            height: 200px;
            color: @colororange;
            text-align: center;
            font-size: @fz62;
        }
        .formcon {
            width: 636px;
            margin: 0 auto;
            dl {
                dd {
                    margin-bottom: 30px;
                    display: flex;
                    align-items: center;
                    box-sizing: border-box;
                    &.yzm {
                        input {
                            width: 300px;
                            line-height: 90px;
                        }
                    }
                    img {
                        width: 48px;
                        height: 48px;
                        margin-right: 30px;
                    }
                    label {
                        border-bottom: 1px solid @color12;
                        display: flex;
                        height: 90px;
                        padding-left: 22px;
                        width: 100%;
                        input {
                            flex: 1;
                            font-size: @fz36;
                            height: 100%;
                        }
                        .countdown {
                            height: 50px;
                            width: 170px;
                            border-radius: 4px;
                            border: 1px solid @color22;
                            text-align: center;
                            line-height: 50px;
                            box-sizing: border-box;
                            color: @color22;
                        }
                    }
                }
            }
            .loginsubmit {
                width: 636px;
                height: 86px;
                line-height: 86px;
                color: #fff;
                background: @colororange;
                display: block;
                margin: 0 auto;
                text-align: center;
                border-radius: 8px;
                margin-top: 120px;
                font-size: @fz36;
                font-weight: bold;
            }
            .agree {
                display: flex;
                justify-content: space-between;
                font-size: @fz26;
                color: #969696;
                text-align: center;
                margin-top: 60px;
            }
        }
    }

</style>